<template>
  <li>
    <label>
      <!-- ooo -->
      <!-- props不要改 -->
      <!-- <input type="checkbox" v-model="todo.done"/> -->
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handleChange(todo.id)"
      />
      <input
        v-show="todo.isEdit"
        ref="InputIsEdit"
        v-model="InputTitle"
        @blur="handleBlur(todo)"
        @keydown.enter="handleBlur(todo)"
      />
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
    </label>
    <button @click="DeleteTodo(todo)" class="btn btn-danger" style="">
      删除
    </button>
    <button @click="handleEdit(todo)" class="btn btn-edit" style="">
      编辑
    </button>
  </li>
</template>

<script>
export default {
  //ooo
  data() {
    return {
      InputTitle: "",
    };
  },
  props: ["todo"],
  methods: {
    // 勾选
    handleChange(id) {
      this.$bus.$emit("handleChange", id);
    },
    // 删
    DeleteTodo(todo) {
      this.$bus.$emit("DeleteTodo", todo);
    },
    // ooo
    // 改_跟checked一个逻辑
    /* UpadataIsEdit(id){
            this.$bus.$emit('UpadataIsEdit',id,this.InputTitle)
            this.$nextTick(()=>{
                // ooo
                this.$refs.InputIsEdit.focus()
            })
            
        }, 
        */
    //ooo
    handleEdit(todo) {
      todo.isEdit = true;
      this.$nextTick(function () {
        this.$refs.InputIsEdit.focus();
      });
    },
    // 失去焦点
    handleBlur(todo) {
      todo.isEdit = false;
      this.$bus.$emit("UpadataIsEdit", todo.id, this.InputTitle);
    },
  },
};
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

/* btn的选择器优先法则 */
/* li button { */
li .btn {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #ddd;
}
/* ooo */
li:hover button {
  display: block;
}
</style>